<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .clusters rect {
          fill: #00ffd0;
          stroke: #999;
          stroke-width: 1.5px;
        }
        text {
          font-weight: 300;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
          font-size: 14px;
        }

        .node rect {
          stroke: #999;
          fill: #fff;
          stroke-width: 1.5px;
        }

        .edgePath path {
          stroke: #333;
          stroke-width: 1.5px;
        }
    </style>
    <title></title>
    <script type="text/javascript" src="../static/js/d3.v5.min.js"></script>
    <script type="text/javascript" src="../static/js/dagre-d3.js"></script>
</head>
<body>
    <svg id="svg1" width="1800" height="1000"></svg>
</body>
<script type="text/javascript">
    function createGraph(data) {
        var object=JSON.parse(data);
        var edges=object.edges;
        var groups=object.groups;
        console.log(edges);
        console.log(groups);

        // Create the input graph
        var g = new dagreD3.graphlib.Graph({compound:true})
          .setGraph({})
          .setDefaultEdgeLabel(function() { return {}; });

        for(let i=0;i<groups.length;i++){
            g.setNode(groups[i].name,{label:groups[i].key.toString(),clusterLabelPos: 'top'})
            let nodeids=groups[i].nodeids;
            for(let j=0;j<nodeids.length;j++) {
                g.setNode(nodeids[j], {label: groups[i].key[j]});
                g.setParent(nodeids[j],groups[i].name);
            }
        }

        for(let i=0;i<edges.length;i++){
            g.setEdge(edges[i][0],edges[i][1]);
        }
        // 下面是绘图相关操作，不用care
        g.nodes().forEach(function(v) {
          var node = g.node(v);
          // Round the corners of the nodes
          node.rx = node.ry = 5;
        });
        // Create the renderer
        var render = new dagreD3.render();
        // Set up an SVG group so that we can translate the final graph.
        var svg = d3.select("#svg1"),
            svgGroup = svg.append("g");
        // Run the renderer. This is what draws the final graph.
        render(d3.select("#svg1 g"), g);
        // Center the graph
        var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
        svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
        svg.attr("height", g.graph().height + 40);
    }
</script>
<script type="text/javascript">
    xmlHttp=new XMLHttpRequest();
    xmlHttp.open("GET","http://127.0.0.1:5000/bpt",true);
    xmlHttp.onreadystatechange=function(){
        createGraph(xmlHttp.responseText);
    };
    xmlHttp.send();
</script>
</html>